{% comment %}
    Renders an article card for a given blog with settings to either show the image or not.

    Accepts:
    - blog: {Object} Blog object
    - article: {Object} Article object
    - show_image: {String} The setting either show the article image or not. If it's not included it will show the image by default

    Usage:
    {% render 'article-card' blog: blog, article: article, show_image: section.settings.show_image %}
{% endcomment %}
<div class="col">
  <article>
    <div class="border-0 card rounded-0 bg-transparent">
      {%- if show_image == true and article.image -%}
        <div class="article-card-img position-relative">
          <div class="figure-wrapper position-relative rounded-2 overflow-hidden">
            <figure class="ratio ratio-3x2 mb-0">
              <picture class="picture">
                <img srcset="
                  {{ article.image.src | img_url: '310x' }} 310w,
                  {{ article.image.src | img_url: '360x' }} 360w,
                  {{ article.image.src | img_url: '390x' }} 390w,
                  {{ article.image.src | img_url: '490x' }} 490w,
                  {{ article.image.src | img_url: '620x' }} 620w,
                  {{ article.image.src | img_url: '720x' }} 720w,
                  {{ article.image.src | img_url: '980x' }} 980w"
                  src="{{ article.image.src | img_url: 'master' }}"
                  sizes="(min-width: 1440px) 466px, (min-width: 1280px) 340px, (min-width: 1152px) 298px, (min-width: 768px) 242px, (min-width: 576px) 100vw, calc(100vw - 32px)"
                  alt="{{ article.image.src.alt | escape }}"
                  width="{{ article.image.width }}"
                  height="{{ article.image.height }}"
                  loading="lazy"
                  class="w-100 h-100 object-fit-cover"
                >
              </picture>
            </figure>
          </div>
          <a {% if article.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ article.url }}" class="stretched-link"></a>
        </div>
      {%- endif -%}
      <div class="card-body position-relative pb-0 px-1">
        <div class="card-text">
        {%- for block in section.blocks -%}
          {%- case block.type -%}
            {%- when 'title'-%}
              <div class="text-muted fs-footnote">
                {% render 'article-author-date-tag',
                  article: article,
                  show_author: block.settings.show_author,
                  show_date: block.settings.show_date,
                  show_tag: block.settings.show_tag
                %}
              </div>
              <h3 class="mb-0 mt-2">
                {{ article.title | escape }}
              </h3>

            {%- when 'summary'-%}
              {%- if article.excerpt.size > 0 -%}
                <p class="mb-3 mb-md-2 ellipsis-2 small">
                  {%- if article.excerpt.size > 0 -%}
                    {{ article.excerpt | strip_html | truncatewords: 60 }}
                  {%- else -%}
                  {%- comment -%}
                  {{ article.content | strip_html | truncatewords: 60 }}
                  {%- endcomment -%}
                  {%- endif -%}
                </p>
              {%- endif -%}

            {%- when 'link'-%}
              <div class="position-relative mt-1" style="z-index: 2;">
                <a {% if article.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ article.url }}" class="btn btn-link link-primary">
                  {{ 'blogs.article.read_more' | t }}
                </a>
              </div>
          {%- endcase -%}
        {%- endfor -%}
        </div>
        <a {% if article.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ article.url }}" class="stretched-link"></a>
      </div>
    </div>
  </article>
</div>
